<template>
	<div class="topdiv">
		<ul>
			<li v-for="item in iconsList" :key="item.id">
				<router-link to="/">
					<img :src="item.imgURL" />
					<p>{{item.title}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
// public目录下所有的文件都是直接读取的
export default{
	name:'Icons',
	data(){
		return {
			iconsList:[
				{ id:1 , imgURL:require('@/assets/img/icon01.png') , title:'国内游' },
				{ id:2 , imgURL:require('@/assets/img/icon02.png') , title:'住宿' },
				{ id:3 , imgURL:require('@/assets/img/icon03.png') , title:'境外游' },
				{ id:4 , imgURL:require('@/assets/img/icon04.png') , title:'海盗度假' },
				{ id:5 , imgURL:require('@/assets/img/icon05.png') , title:'境外游' },
				{ id:6 , imgURL:require('@/assets/img/icon06.png') , title:'出行方式' },
				{ id:7 , imgURL:require('@/assets/img/icon07.png') , title:'周边游' },
				{ id:8 , imgURL:require('@/assets/img/icon08.png') , title:'户外游' }
			],
		}
	}
}
</script>

<style scoped>
*{
	text-decoration: none;
}
.icons{
	width: 100%;
	height: 3rem;
}
.topdiv{
	width: 100%;
	height: 4.8rem;
	border-bottom: 0.01rem solid gray;
}
.topdiv ul li{
	float: left;
	text-align: center;
	width: 25%;
	line-height: 1rem;
}
.topdiv ul li img{
	margin-top: 0.55rem;
	height: 1.1rem;
}
.topdiv ul li P{
	margin-top: -0.3rem;
	line-height: 0.5rem;
	color: #000000;
}
</style>
